import React, { Component } from 'react'
import { Flex, WingBlank, WhiteSpace, Toast } from 'antd-mobile'

import { Link } from 'react-router-dom'
import { withFormik, Form, Field, ErrorMessage } from 'formik'
import * as Yup from 'yup'

// 导入 API
import { API } from '../../utils/axios'

import NavHeader from '../../components/NavHeader'

import styles from './index.module.css'
import { setToken } from '../../utils'

// 验证规则：
const REG_UNAME = /^[a-zA-Z_\d]{5,8}$/
const REG_PWD = /^[a-zA-Z_\d]{5,12}$/

/* 
  简化表单处理：

  1 导入 Form 组件，替换 form 元素，去掉 onSubmit。
  2 导入 Field 组件，替换 input 表单元素，去掉 onChange、onBlur、value。
  3 导入 ErrorMessage 组件，原来的错误消息逻辑代码。
  4 去掉所有 props。
*/

class Login extends Component {

  render() {
    // 通过 props 获取高阶组件传递的属性,简化以后
    // const { values, handleSubmit, handleChange, errors, handleBlur, touched } = this.props;
    const { values } = this.props;
    return (
      <div className={styles.root}>
        {/* 顶部导航 */}
        <NavHeader className={styles.navHeader}>账号登录</NavHeader>
        <WhiteSpace size="xl" />

        {/* 登录表单 */}
        <WingBlank>
          <Form>
            {/* 账号 */}
            <div className={styles.formItem}>
              <Field className={styles.input} name="username" placeholder="请输入账号" />
            </div>
            <ErrorMessage className={styles.error} name="username" component="div" />
            {/* 密码 */}
            <div className={styles.formItem}>
              <Field className={styles.input} name="password" type="password" value={values.password} placeholder="请输入密码" />
            </div>
            <ErrorMessage className={styles.error} name="password" component="div" />
            <div className={styles.formSubmit}>
              <button className={styles.submit} type="submit">
                登 录
              </button>
            </div>
          </Form>
          <Flex className={styles.backHome}>
            <Flex.Item className={styles.register}>
              <Link to="/registe">还没有账号，去注册~</Link>
            </Flex.Item>
          </Flex>
        </WingBlank>
      </div>
    )
  }
}
// 高阶组件
Login = withFormik({
  // 提供状态
  mapPropsToValues: ()=> ({username: 'test2', password: 'test2' }),
  // 提交事件
  handleSubmit: async (values, { props }) => {
    const { username, password } = values;
    const { data } = await API.post(`/user/login`, {
      username,
      password
    });
    const { status, body, description } = data;
    if (status !== 200) return Toast.info(description, 2, null, false);
    setToken(body.token);
    const { state } = props.location;
    if (state) return props.history.replace(state.from.pathname); 
    props.history.goBack();
  },
  // 校验表单
  validationSchema: Yup.object().shape({
    username: Yup.string().required('账号为必填项').matches(REG_UNAME, '长度为5-8位，只能出现数字、字母、下划线'),
    password: Yup.string().required('密码为必填项').matches(REG_PWD, '长度为5-12位，只能出现数字、字母、下划线')
  })
})(Login)

// 注意：此处返回的是 高阶组件 包装后的组件
export default Login
